import React from 'react';
import {findDOMNode} from 'react-dom';

import echarts from 'echarts/lib/echarts';
// 引入地图
import 'echarts/lib/chart/map';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';


import fetch from 'isomorphic-fetch';
import { MAP_URL } from '../../../../constants/API';
import { cityMap } from '../../../china-main-city-map';


function randomData() {
    return Math.round(Math.random()*1000);
}

export default class Charts extends React.Component {
	static propTypes = {
		name: React.PropTypes.string,
	};

	constructor(props) {
		super(props);
	};
	drawChart = (nextProps) =>{
		let { areaName, data } = nextProps;
		data = data.map((item) => ({
			name: item.area,
			value: item.onlineStudent + item.onlineTeacher,
			onlineStudent: item.onlineStudent,
			onlineTeacher: item.onlineTeacher,
			submits: item.submits,
			fixpus: item.fixpus
		}));
		let dataMax=0;
		if (data.length!=0)
			dataMax=data.slice(0).sort((n2,n1)=>(n1.value)-(n2.value))[0].value;

		let myChart = echarts.init(findDOMNode(this.refs.chartsActive));
		//图表测试数据
		let option = {
		    
	        tooltip: {
	            trigger: 'item',
	            formatter: (params) => {
	            	let { data } = params;
	            	return `<p style="background: #5e6166; color: #fff; padding: 5px;">${data.name}</p>\
	            	<p style="padding: 5px;">在线学生数:${data.onlineStudent||0}</p>\
	            	<p style="padding: 5px;">在线教师数:${data.onlineTeacher||0}</p>\
	            	<p style="padding: 5px;">提交作业学生数:${data.submits||0}</p>\
	            	<p style="padding: 5px;">布置作业教师数:${data.fixpus||0}</p>`;
	            },
				backgroundColor: '#ececec',
				padding: 0,
				textStyle: {
					color: '#5e6166'
				}
	        },
	        visualMap: {
	            min: 0,
	            max: dataMax,
	            text:['高','活跃程度 ： 低'],
	            realtime: false,
	            calculable: false,
	            color: ['#67dddd','#ccf4f4'],
	            orient:'horizontal',
	            left:20,
	            bottom:20,
	            textStyle:{
	            	fontWeight:'bold'
	            }
	            
	        },
		    series: [
	            {
	                name: '香港18区人口密度',
	                type: 'map',
	                mapType: areaName, // 自定义扩展图表类型
	                label: {
	                	normal: {
	                		textStyle: {
	                			color: '#5e6166'
	                		},
	                		position: ['50%', '50%']
	                	}
	                },
	                itemStyle:{
	                    normal:{
	                    	label:{ show:true },
	                    	borderColor:'#9ceaea'
	                    },
	                    emphasis:{
	                    	label:{ show:true },
	                    	// 图表高亮的颜色选项
	                    	areaColor: '#fff',
	                    	borderColor: '#67dddd',
	                    	borderWidth: 1,
	                    	opacity: 1
	                    }
	                },
	                data
	            }
	        ]
		};

		fetch(`${MAP_URL}/${cityMap[areaName]}.json`)
			.then((response) => response.json())
			.then((json) => {
				echarts.registerMap(areaName, json);
				myChart.setOption(option);
			})
	}
	componentWillUpdate(nextProps, nextState) {
		this.drawChart(nextProps)
	}
	shouldComponentUpdate(nextProps, nextState) {

		let oldDataActive = this.props.data;
		let newDataActive = nextProps.data;

		if (oldDataActive.length!=newDataActive.length)
			return true;
		
		return false
	}
	componentDidMount() {
			let props = this.props;
			this.drawChart(props)
		}
	render() {
		return (<div ref ='chartsActive' style={{width:'100%',height:'100%',margin:'0 auto'}}></div>)
	}
}